<!-- 添加学员 -->
<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    :size="formSize"
    status-icon
  >
    <el-divider content-position="left">基本信息</el-divider>
    <el-row>
      <el-col :span="12">
        <el-form-item label="学员姓名" prop="name">
          <el-input v-model="ruleForm.name" width="100" />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <div class="mb-2 flex items-center text-sm">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男" />
              <el-radio label="女" />
            </el-radio-group>
          </div>
        </el-form-item>

        <el-form-item label="身份证号" prop="cardId">
          <el-input v-model="ruleForm.cardId" />
        </el-form-item>

        <el-form-item label="手机号码" prop="tel">
          <el-input v-model="ruleForm.tel" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="头像" prop="avatar">
          <StuUpload v-model="ruleForm.avatar"></StuUpload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">报名信息</el-divider>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="schoolName" label="报考校区">
          <el-select
            v-model="ruleForm.schoolName"
            placeholder="选择报考校区"
            required
          >
            <el-option
              v-for="item in optionsSchool"
              :label="item.schoolName"
              :value="item.schoolName"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="isIndigen" label="所在区域">
          <el-select
            v-model="ruleForm.isIndigen"
            placeholder="选择本地外地"
            required
          >
            <el-option label="本地" value="本地" />
            <el-option label="外地" value="外地" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="type" label="报考班型">
          <el-select
            v-model="ruleForm.type"
            placeholder="选择报考班型"
            required
          >
            <el-option
              v-for="item in optionsClass"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="carType" label="准驾车型">
          <el-select
            v-model="ruleForm.carType"
            placeholder="选择准驾车型"
            required
          >
            <el-option
              v-for="item in optionstype"
              :label="item.carType"
              :value="item.carType"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="Regtime" label="注册时间" required>
          <el-date-picker
            v-model="ruleForm.Regtime"
            type="date"
            placeholder="请选择日期"
          />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="referrer" label="推荐人">
          <el-input v-model="ruleForm.referrer" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="地址" prop="address">
      <el-input v-model="ruleForm.address" placeholder="请输入地址" />
    </el-form-item>

    <el-form-item label="备注" prop="content">
      <el-input v-model="ruleForm.content" placeholder="请输入备注内容" />
    </el-form-item>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="coach1" label="科二教练">
          <el-select v-model="ruleForm.coach1" placeholder="预选教练" required>
            <el-option
              v-for="item in optionsCocah2"
              :label="item.name"
              :value="item.objectId"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="coach2" label="科三教练">
          <el-select v-model="ruleForm.coach2" placeholder="预选教练" required>
            <el-option
              v-for="item in optionsCocah3"
              :label="item.name"
              :value="item.objectId"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确认添加
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import StuUpload from "./stu-imgupload.vue";
import { StuAdd, SchoolNameGet, CarTypeGet } from "../../../api/students";
import { reactive, ref } from "vue";
import { coachGet } from "../../../api/coachmange";
import { CoachType } from "../../../types/coach";
import { SchoolType } from "../../../types/school";

import type { FormInstance, FormRules } from "element-plus";

interface RuleForm {
  name: string;
  sex: string;
  cardId: string;
  tel: string;
  avatar?: string;
  schoolName: string;
  isIndigen: string;
  type: string;
  carType: string;
  Regtime: string;
  referrer?: string;
  address: string;
  content?: string;
  coach1?: string;
  coach2?: string;
}

const emit = defineEmits(["update:modelValue", "handlerefsh"]);

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  sex: "男",
  cardId: "",
  tel: "",
  avatar: "",
  schoolName: "",
  isIndigen: "",
  type: "",
  carType: "",
  Regtime: "",
  referrer: "",
  address: "",
  content: "",
  coach1: "",
  coach2: "",
});

const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  sex: [
    {
      required: true,
      message: "请选择性别",
      trigger: "change",
    },
  ],
  cardId: [
    {
      required: true,
      message: "请输入正确的身份证号",
      trigger: "blur",
    },
  ],
  tel: [
    {
      required: true,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],

  schoolName: [
    {
      required: true,
      message: "请选择报名校区",
      trigger: "change",
    },
  ],

  type: [{ required: true, message: "请选择报考班型", trigger: "change" }],
  carType: [{ required: true, message: "请选择准驾车型", trigger: "change" }],
  Regtime: [
    {
      required: true,
      type: "date",
      message: "请选择注册时间",
      trigger: "change",
    },
  ],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      StuAdd(ruleForm).then(() => {
        formEl.resetFields();
        emit("update:modelValue", false);
        emit("handlerefsh");
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 定义数据包生成选项
// 校区数据包
SchoolNameGet().then((res) => {
  optionsSchool.value = res.data.results;
});
const optionsSchool = ref<SchoolType[]>([]);

const optionsClass = ref<string[]>([
  "学生特惠班，2600.00元",
  "社会速成班，2682.00元",
  "学生速成班，2300.00元",
  "农用经济班，1000.00元",
  "社会全包班，7000.00元",
  "农用速成班，6000.00元",
  "农用特惠班，800.00元",
  "摩托速成班，500.00元",
]);
CarTypeGet().then((res) => {
  optionstype.value = res.data.results;
});
const optionstype = ref<any>([]);

//教练数据包
coachGet().then((res) => {
  optionsCocah2.value = res.data.results.filter(
    (item: CoachType) => item.object === "科目二"
  );
  optionsCocah3.value = res.data.results.filter(
    (item: CoachType) => item.object === "科目三"
  );
});
const optionsCocah2 = ref<CoachType[]>();
const optionsCocah3 = ref<CoachType[]>();
</script>
